<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>云API</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/swiper.css">


    <style>
    body{
      width: 100%;
      height: 100%;
    }
        .header {
            width: 100%;
            height: 2.5rem;
            line-height: 2.5rem;
            /*padding: 0.5rem 0.8rem;*/
            background-color: #40cccc;

        }

        .header_l {
            float: left;
            font-size: 1.2rem;
            margin-left: 3%;
        }

        .header_r {
            margin-right: 3%;;
            width: 3.5rem;
            height: 2rem;
            line-height: 2rem;
            color: #40cccc;
            border-radius: 1rem;
            background-color: #fff;
            float: right;
            text-align: center;
            font-size: 1rem;
            margin-top: 0.3rem;
            font-weight: bold;
        }

        .ul_log {
            width: 100%;
            height: 2.5rem;
        }

        .ul_log ul {
            width: 85%;
            margin: 0 auto;
            padding: 0.5rem 0.8rem;
        }

        .ul_log ul li {
            width: 30%;
            height: 2.5rem;
            line-height: 2.5rem;
            list-style: none;
            text-decoration: none;
            display: block;
            float: left;
            text-align: center;
            font-size: 1.3rem;
            font-weight: bold;
        }

        .li {
            color: #40cccc;
        }

        .lines_s {
            position: absolute;
            top: 5.3rem;
            left: 20%;
            border-bottom: 0.25rem solid #40cccc;
            width: 1.5rem;
        }

        .lines_ss {
            position: absolute;
            top: 5.3rem;
            right: 50%;
            border-bottom: 0.25rem solid #40cccc;
            width: 1.5rem;
        }

        .lines_sss {
            position: absolute;
            top: 5.3rem;
            right: 25%;
            border-bottom: 0.25rem solid #40cccc;
            width: 1.5rem;
        }

        .banner {
            width: 100%;
            height: 10.5rem;
            margin-top: 0.5rem;
        }

        .found {
            width: 93%;
            height: 3rem;
            padding: 1rem 0.8rem;
            background-color: rgb(242, 242, 242, 0.5);
        }
        .founds {
            width: 100%;
            height: 3rem;
            line-height: 3rem;
            padding: 0.5rem 0rem 0.3rem 0rem;
            background-color: rgb(242, 242, 242, 0.5);
        }
        .found_all {
            width: 100%;
            height: 3rem;
            border-radius: 1.5rem;
            background-color: #fff;
        }

        .found_img {
            width: 4%;
            padding: 0.8rem 1rem;
            height: 1.5rem;
            float: left;
        }

        .found_all input {
            border: none;
            outline: none;
            list-style: none;
            height: 3rem;
            line-height: 3rem;
            width: 63%
        }

        .found_img img {
            width: 100%;
            height: 100%;
        }

        .found_r {
            float: right;
            width: 22%;
            height: 2.9rem;
            line-height: 2.9rem;
            text-align: center;
            color: #fff;
            background-color: #40cccc;
            border-top-right-radius: 1.5rem;
            border-bottom-right-radius: 1.5rem;
        }

        .like {
            width: 91%;
            padding: 0.5rem 1rem;
        }

        .like_top {
            width: 100%;
            height: 2rem;
            line-height: 2rem;
        }

        .like_top h4 {
            float: left;
        }

        .top_t {
            width: 31%;
            height: 2rem;
            float: right;
        }

        .top_t a {
            text-decoration: none;
            color: #ccc;
        }

        .top_t a img {
            float: right;
            width: 15%;
            height: 15%;
            margin-top: 0.4rem;
        }

        .like_pic {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .pic_one {
            width: 49%;
            height: 6rem;
            margin-top: 1.2rem;
            position: relative;
        }

        .pic_img img {
            width: 100%;
            height: 100%;
        }

        .pic_text {
            width: 91%;
            height: 2rem;
            line-height: 2rem;
            padding-left: 1rem;
            background-color: rgb(0, 0, 0, 0.3);
            position: absolute;
            z-index: 999;
            bottom: 0;
            color: #ccc;
        }
        .like_buttom{
          width: 100%;
          height: 2rem;
          line-height: 2rem;
          margin-top: 1rem;
        }
        .buttom_left{
          width:30%;
          padding-left: 1.5rem;
          float: left;
        }
        .buttom_right{
          width:25%;
          float: right;
          text-align: right;
        }
        .buttom_right a{
          float: left;
          color: #40cccc;
          font-size: 1rem;
            line-height: 2rem;
        }
        .buttom_left a{
          float: left;
          color: #40cccc;
          font-size: 1rem;
            line-height: 2rem;
            margin-top: 0.2rem;
        }
        .b_img{
          width: 15%;
          height: 15%;
          margin-top: 0.3rem;
          float: left;
        }
        .b_img img{
          width: 100%;
          height: 100%;
        }
        .all{
          width: 100%;
          height: 3rem;
          line-height: 3rem;
          padding: 0rem 0rem 0.3rem 0rem;
          background-color: rgb(242, 242, 242, 0.5);
        }
        .all ul{
          background-color: #fff;
          height: 3rem;
          width: 93%;
          padding: 0rem 0.8rem;
          display: flex;
          justify-content: space-between;
        }
        .all ul li{
          float: left;
          width: 16%;
          height: 3rem;
          line-height: 3rem;
          text-align: center;
        }
        .all ul li a{
          list-style: none;
          text-decoration: none;
          color: black;
          font-weight: bold;
        }
        .all ul li a:hover{
          color: #40cccc;
              border-bottom: 0.2rem solid #40cccc;
        }
        .all ul li a:active{
          color: black;
          border: none;
        }
        #lia{
          color: #40cccc;
            border-bottom: 0.2rem solid #40cccc;
        }
        .footer{
          width: 100%;
          /*padding: 0rem 0rem 0.3rem 0rem;*/
          background-color: rgb(242, 242, 242, 0.5);
        }
        .footer_one{
          width: 93%;
          height: 8rem;
          padding: 0.5rem 0.8rem;
          background-color: #fff;
          margin-bottom: 0.3rem;
        }
        .footer_l{
          width: 60%;
          height: 8rem;
          float: left;
        }
        .footer_l p{
          height: 2rem;
          line-height: 2rem;
        }
        .footer_o{
          height: 2rem;
          line-height: 2rem;
        }
        .fimg{
          float: left;
          margin-top: 0.2rem;
          width: 10%;
          height: 60%;
        }
        .fimg img{
          width: 100%;
          height: 100%;
        }
        .pp{
          color: #ccc;
          font-size: 1rem;
          font-weight: bold;
        }
        .footer_r{
          width:30%;
          height: 8rem;
          float: right;
        }
        .footer_r img{
          width: 100%;
          height: 100%;
        }
    </style>
</head>

<body>
    <div class="header" id="header">
        <div class="header_l">
            <span style="color:#fff;">课程</span>
            <!-- <span style="color:#ccc;">健康</span> -->
        </div>
        <div class="header_r" onclick="openwin('shop')">
            商城
        </div>
    </div>
    <!-- 列表 -->
    <div class="ul_log">
        <ul id="ul">
            <li class="menus" onclick="set_frame(0)" id="li" style="">今日推荐</li>
            <div class="lines_s" id="jrtj"></div>

            <li class="menus" onclick="set_frame(1)" style="" id="lis">全部课程</li>
            <div class="lines_ss" id="qbkc"></div>

            <li class="menus" onclick="set_frame(2)" style="" id="blis">本地课程</li>
            <div class="lines_sss" id="bdkc"></div>
        </ul>
    </div>
    <!--qbkc 轮播 -->


</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.3.js"></script>

<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript">
var page = 1;
var pagesize = 10;

apiready = function() {
  // get_banenrlist()//获取banner列表
  // guesslike()//猜你喜欢（无算法）
  // get_cur_list();//获取列表课程（无算法）
  api.addEventListener({
      name:'index_send',
      extra:{
          threshold:0
      }
  }, function(ret, err){
      if(ret.value.index==0){//今日推荐
        $("#jrtj").css("display",'block')
        $("#li").addClass("li");
        $("#qbkc").css("display",'none')
        $("#lis").removeClass("li");
        $("#bdkc").css("display",'none');
        $("#blis").removeClass("li");

      }else if(ret.value.index==1){//全部课程
        $("#jrtj").css("display",'none')
        $("#li").removeClass("li");
        $("#qbkc").css("display",'block')
        $("#lis").addClass("li");
        $("#bdkc").css("display",'none')
        $("#blis").removeClass("li");

      }else{//本地课程
        $("#jrtj").css("display",'none')
        $("#li").removeClass("li");
        $("#qbkc").css("display",'none')
        $("#lis").removeClass("li");
        $("#bdkc").css("display",'block')
        $("#blis").addClass("li");
    }
        //alert( JSON.stringify( ret ) );
  });
var aMap = api.require('aMap');

  aMap.getLocation(function(ret, err) {
      if (ret.status) {
        //  alert(JSON.stringify(ret));
          get_user_city(ret.lon, ret.lat);
      } else {
          alert(JSON.stringify(err));
      }
  });

}
function get_user_city(lon,lat){
  var aMap = api.require('aMap');
  aMap.getNameFromCoords({
    lon: lon,
    lat: lat
}, function(ret, err) {
    if (ret.status) {
        $api.setStorage('city',  ret.city);
    } else {
        alert(JSON.stringify(err));
    }
});
}
function get_cur_list() {
  var html =''
  var obj = $api.byId('cur_list');

  api.ajax({
      url: SITE_URL+'cur_api/cur/get_list',
      method: 'post',
      data: {
          values: {
              page: page,
              pagesize:pagesize
          }
      }
  },function(ret, err){
      if (ret) {
        if(ret.error==200){
          if(ret.data.length){
            for (var i = 0; i < ret.data.length; i++) {
              var dat = ret.data[i]
              html +='<div class="footer_one">'
              html +='<div class="footer_l">'
              html +='<p style="padding-bottom: 0.5rem;font-size1.2rem;">'+dat.cur_name+'</p>'
              html +='<p class="pp">'+dat.cur_title+'</p>'
              html +='<div class="footer_o">'
              html +='<div class="fimg">'
              html +='<img src="../image/u62.png" alt="">'
              html +='</div>'
              html +='<span class="pp">'+dat.stage_name+'</span>'
              html +='</div>'
              html +='</div>'
              html +='<div class="footer_r">'
              html +='<img src="'+dat.img_url+'" alt="">'
              html +='</div>'
              html +='</div>'
            }
            $api.append(obj, html);
            page +=1
          }
        }
          //alert( JSON.stringify( ret ) );
      } else {
          //alert( JSON.stringify( err ) );
      }
  });

}



function guesslike(){
  var html =''
  var obj = $api.byId('guesslike');
  api.ajax({
      url: SITE_URL+'cur_api/guesslike/get_list',
      method: 'post',

  },function(ret, err){
      if (ret) {
        if(ret.error==200){
          if(ret.data.length){
            for (var i = 0; i < ret.data.length; i++) {
              var dat = ret.data[i]
              html +='<div class="pic_one" onclick="">'
              html +='<div class="pic_img"  style="height:6rem">'
              html +='<img src="'+dat.img_url+'" alt="" style="border-radius:1rem 1rem 0 0">'
              html +='</div>'
              html +='<div class="pic_text">'
              html +=dat.cur_name
              html +='</div>'
              html +='</div>'
            }
            $api.html(obj, html);

          }
        }else{

        }

        //  alert( JSON.stringify( ret ) );
      } else {
        msgcode('请检查网络连接')
          //alert( JSON.stringify( err ) );
      }
  });

}

function get_banenrlist() {
  var html =''
  var obj = $api.byId('banner_list');

  api.ajax({
      url: SITE_URL+'setting_api/banner/get_list',
      method: 'post',
  },function(ret, err){
      if (ret) {
        if(ret.error==200){
          if(ret.data.length){
            for (var i = 0; i < ret.data.length; i++) {
              var dat = ret.data[i]
              html +='<div class="swiper-slide"><img src="'+dat.img_url+'" width="100%" height="100%"></div>'
            }
            $api.html(obj, html);
            var mySwiper = new Swiper ('.swiper-container', {
              autoplay:true,
              loop : true,
            })
            // console.log(html)
          }
        }else{
          document.getElementById('day').style.display='none'
        }
          // alert( JSON.stringify( ret ) );
      } else {
        msgcode('请检查网络连接')
        //  alert( JSON.stringify( err ) );
      }
  });

}

function set_frame(keys) {
  api.setFrameGroupIndex({
      name: 'index_form',
      index: keys
  });
}
 </script>
</html>
